// 封装获取元素的函数
// function qs(ele) {
//     return document.querySelector(ele)
// }
// 简写
const qs = ele => document.querySelector(ele)
console.log(qs('#province'));
// 接口地址：https://www.apifox.cn/apidoc/shared-36f0cbc0-9064-44bc-850a-805e263bf494/api-25827426
// !配置请求根路径
axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

  // todo ======== 默认省市区=========
  ; (async () => {
    //todo ============ 获取省份数据 ==================
    // 解构获取省份数据对象
    const { data: { data: provinceData } } = await axios.get('/city/province')
    console.log('省份数组', provinceData)
    // 渲染数据到页面
    // ⭐注意字符串拼接默认显示的数据
    const provinceStr = provinceData.map(item => `<option value="${item.province}">${item.name}</option>`).join('')
    qs('#province').innerHTML = '<option value="">请选择省份</option>' + provinceStr
    // 设置下拉框默认值
    // ⭐select对象.innerHTML:设置下拉框内容
    // ⭐select对象.value:可以获取设置下拉框的默认值 
    //      select.value=option.value,即展示对应的option内容
    qs('#province').value = 34

    //todo ============ 获取安徽省下市数据 ==================
    // 解构获取市数据对象
    const { data: { data: cityData } } = await axios.get('/city/city', {
      params: {
        provinceCode: '34'
      }
    })
    console.log('市数组', cityData)
    // 渲染数据到页面
    const cityStr = cityData.map(item => `<option value="${item.city}">${item.name}</option>`).join('')
    qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
    // 设置下拉框默认值
    qs('#city').value = '01'

    //todo ============ 获取合肥市下区数据 ==================
    // 解构获取区数据对象
    const { data: { data: areaData } } = await axios.get('/city/area', {
      params: {
        provinceCode: '34',
        cityCode: '01'
      }
    })
    console.log('区数组', areaData)
    // 渲染数据到页面
    const areaStr = areaData.map(item => `<option value="${item.area}">${item.name}</option>`).join('')
    qs('#county').innerHTML = '<option value="">请选区县</option>' + areaStr
    // 设置下拉框默认值
    qs('#county').value = '02'
  })()

// todo ======== 省发生改变时，获取到对应的市数据=========
qs('#province').addEventListener('change', async function () {
  console.log(this.value)
  // 解构获取市数据对象
  const { data: { data: cityData } } = await axios.get('/city/city', {
    params: {
      provinceCode: this.value
    }
  })
  console.log('市数组', cityData)
  // 渲染数据到页面
  const cityStr = cityData.map(item => `<option value="${item.city}">${item.name}</option>`).join('')
  qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
  // 解决bug 省改变区县也要重置
  qs('#county').innerHTML = '<option value="">请选区县</option>'

})

// todo ======== 市发生改变时，获取到对应的市数据=========
qs('#city').addEventListener('change', async function () {
  console.log(this.value)
  // 解构获取区数据对象
  const { data: { data: areaData } } = await axios.get('/city/area', {
    params: {
      provinceCode: qs('#province').value,
      cityCode: this.value
    }
  })
  console.log('区数组', areaData)
  // 渲染数据到页面
  const areaStr = areaData.map(item => `<option value="${item.area}">${item.name}</option>`).join('')
  qs('#county').innerHTML = '<option value="">请选区县</option>' + areaStr
})